<template>
  <view class="page">
    <!-- 状态栏占位 -->
    <view :style="{ height: statusBarHeight + 'px' }"></view>

    <!-- 导航栏 -->
    <view class="nav-bar">
      <view class="nav-left" @tap="goBack">
        <text class="fa fa-chevron-left fa-gray"></text>
      </view>
      <text class="nav-title">我的学习统计</text>
      <view class="nav-right" @tap="goToMessages">
        <text class="fa fa-bell-o search-icon fa-gray"></text>
      </view>
    </view>

    <!-- 内容区域 -->
    <scroll-view scroll-y class="content">
      <!-- 用户概览卡片 -->
      <view class="user-overview">
        <view class="user-card">
          <view class="user-header">
            <view class="user-avatar">
              <text class="fa fa-user"></text>
            </view>
            <view class="user-info">
              <text class="user-name">张医生</text>
              <text class="user-dept">内科 · 主治医师</text>
            </view>
          </view>
          <view class="stats-grid">
            <view class="stat-item">
              <text class="stat-value">156</text>
              <text class="stat-label">学习天数</text>
            </view>
            <view class="stat-item">
              <text class="stat-value">89.5</text>
              <text class="stat-label">累计学时</text>
            </view>
            <view class="stat-item">
              <text class="stat-value">85%</text>
              <text class="stat-label">完成率</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 学习数据 -->
      <view class="section">
        <view class="card">
          <view class="card-header">
            <text class="card-title">学习数据</text>
            <text class="card-subtitle">本年度</text>
          </view>
          <view class="data-grid">
            <view class="data-item data-item-green">
              <text class="data-value">12</text>
              <text class="data-label">已完成课程</text>
            </view>
            <view class="data-item data-item-blue">
              <text class="data-value">8</text>
              <text class="data-label">进行中课程</text>
            </view>
            <view class="data-item data-item-yellow">
              <text class="data-value">15</text>
              <text class="data-label">已参加考试</text>
            </view>
            <view class="data-item data-item-purple">
              <text class="data-value">6</text>
              <text class="data-label">线下培训</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 练习统计 -->
      <view class="section">
        <view class="card">
          <view class="card-header">
            <text class="card-title">练习统计</text>
            <text class="card-subtitle">最近30天</text>
          </view>
          <view class="practice-list">
            <view class="practice-item">
              <view class="practice-left">
                <view class="practice-dot practice-dot-green"></view>
                <text class="practice-name">题库练习</text>
              </view>
              <view class="practice-right">
                <text class="practice-count">286题</text>
                <text class="practice-rate">正确率 87%</text>
              </view>
            </view>
            <view class="practice-item">
              <view class="practice-left">
                <view class="practice-dot practice-dot-red"></view>
                <text class="practice-name">错题复习</text>
              </view>
              <view class="practice-right">
                <text class="practice-count">42题</text>
                <text class="practice-rate">已掌握 76%</text>
              </view>
            </view>
            <view class="practice-item">
              <view class="practice-left">
                <view class="practice-dot practice-dot-blue"></view>
                <text class="practice-name">收藏练习</text>
              </view>
              <view class="practice-right">
                <text class="practice-count">28题</text>
                <text class="practice-rate">重点巩固</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 证书成就 -->
      <view class="section">
        <view class="card">
          <view class="card-header">
            <text class="card-title">证书成就</text>
            <text class="card-link" @tap="goToCertificates">查看全部</text>
          </view>
          <view class="achievement-grid">
            <view class="achievement-item achievement-item-yellow">
              <view class="achievement-header">
                <text
                  class="fa fa-certificate"
                  style="color: rgb(202 138 4)"
                ></text>
                <text class="achievement-name">已获证书</text>
              </view>
              <text class="achievement-value">4</text>
            </view>
            <view class="achievement-item achievement-item-green">
              <view class="achievement-header">
                <text class="fa fa-trophy fa-green"></text>
                <text class="achievement-name">学习成就</text>
              </view>
              <text class="achievement-value">12</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 最近活动 -->
      <view class="section">
        <view class="card">
          <view class="card-header">
            <text class="card-title">最近活动</text>
            <text class="card-subtitle">最近7天</text>
          </view>
          <view class="activity-list">
            <view class="activity-item activity-item-blue">
              <view class="activity-icon">
                <text class="fa fa-book fa-blue"></text>
              </view>
              <view class="activity-content">
                <text class="activity-title">完成课程学习</text>
                <text class="activity-time"
                  >心肺复苏术标准操作 • 今天 14:30</text
                >
              </view>
            </view>
            <view class="activity-item activity-item-green">
              <view class="activity-icon">
                <text class="fa fa-check fa-green"></text>
              </view>
              <view class="activity-content">
                <text class="activity-title">通过理论考试</text>
                <text class="activity-time">医疗器械消毒规范 • 昨天 16:45</text>
              </view>
            </view>
            <view class="activity-item activity-item-yellow">
              <view class="activity-icon">
                <text class="fa fa-clipboard fa-yellow"></text>
              </view>
              <view class="activity-content">
                <text class="activity-title">参加线下培训</text>
                <text class="activity-time">住院医师规范化培训 • 1月17日</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 学习目标 -->
      <view class="section">
        <view class="card">
          <view class="card-header">
            <text class="card-title">学习目标</text>
            <text class="card-subtitle">2025年度</text>
          </view>
          <view class="goal-list">
            <view class="goal-item">
              <view class="goal-header">
                <text class="goal-name">年度学时目标</text>
                <text class="goal-progress">89.5/120小时</text>
              </view>
              <view class="progress-bar">
                <view
                  class="progress-fill progress-fill-blue"
                  style="width: 75%"
                ></view>
              </view>
            </view>
            <view class="goal-item">
              <view class="goal-header">
                <text class="goal-name">证书获取目标</text>
                <text class="goal-progress">4/6个</text>
              </view>
              <view class="progress-bar">
                <view
                  class="progress-fill progress-fill-green"
                  style="width: 67%"
                ></view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 底部导航栏 -->
    <view class="tabbar">
      <view class="tab-item" @tap="goToHome">
        <text class="fa fa-home"></text>
        <text class="tab-label">首页</text>
      </view>
      <view class="tab-item tab-item-active">
        <text class="fa fa-cog"></text>
        <text class="tab-label">工作台</text>
      </view>
      <view class="tab-item" @tap="goToProfile">
        <text class="fa fa-user"></text>
        <text class="tab-label">我的</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      statusBarHeight: 0,
    };
  },
  onLoad() {
    // 获取状态栏高度
    this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight || 0;
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    goToMessages() {
      uni.navigateTo({
        url: "/pages/messages",
      });
    },
    goToCertificates() {
      uni.navigateTo({
        url: "/pages/certificates",
      });
    },
    goToHome() {
      uni.navigateTo({
        url: "/pages/home",
      });
    },
    goToProfile() {
      uni.navigateTo({
        url: "/pages/profile",
      });
    },
  },
};
</script>

<style scoped>
.page {
  min-height: 100vh;
  background: linear-gradient(to bottom right, #f9fafb, #eff6ff);
  display: flex;
  flex-direction: column;
}

/* 导航栏 */
.nav-bar {
  height: 88rpx;
  background: #fff;
  border-bottom: 1rpx solid #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.nav-left {
  position: absolute;
  left: 32rpx;
}

.nav-title {
  font-size: 34rpx;
  font-weight: 600;
  color: #111827;
}

.nav-right {
  position: absolute;
  right: 32rpx;
  font-size: 36rpx;
  color: #6b7280;
}

/* 内容区域 */
.content {
  flex: 1;
  padding-bottom: 120rpx;
}

.section {
  padding: 0 32rpx;
  margin-top: 24rpx;
}

/* 用户概览 */
.user-overview {
  padding: 24rpx 32rpx 0;
}

.user-card {
  background: linear-gradient(to right, #3b82f6, #6366f1);
  border-radius: 32rpx;
  padding: 32rpx;
}

.user-header {
  display: flex;
  align-items: center;
  gap: 24rpx;
  margin-bottom: 24rpx;
}

.user-avatar {
  width: 96rpx;
  height: 96rpx;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48rpx;
}

.user-info {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.user-name {
  font-size: 32rpx;
  font-weight: 600;
  color: #fff;
}

.user-dept {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.9);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32rpx;
  text-align: center;
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.stat-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #fff;
}

.stat-label {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.9);
}

/* 卡片 */
.card {
  background: #fff;
  border-radius: 32rpx;
  padding: 32rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  border: 1rpx solid #f3f4f6;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24rpx;
}

.card-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #111827;
}

.card-subtitle {
  font-size: 24rpx;
  color: #6b7280;
}

.card-link {
  font-size: 24rpx;
  color: #2563eb;
}

/* 数据网格 */
.data-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32rpx;
}

.data-item {
  border-radius: 24rpx;
  padding: 24rpx;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.data-item-green {
  background: #dcfce7;
}

.data-item-blue {
  background: #dbeafe;
}

.data-item-yellow {
  background: #fef3c7;
}

.data-item-purple {
  background: #f3e8ff;
}

.data-value {
  font-size: 48rpx;
  font-weight: bold;
}

.data-item-green .data-value {
  color: #16a34a;
}

.data-item-blue .data-value {
  color: #2563eb;
}

.data-item-yellow .data-value {
  color: #ca8a04;
}

.data-item-purple .data-value {
  color: #9333ea;
}

.data-label {
  font-size: 24rpx;
  color: #4b5563;
  margin-top: 8rpx;
}

/* 练习列表 */
.practice-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.practice-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.practice-left {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.practice-dot {
  width: 24rpx;
  height: 24rpx;
  border-radius: 50%;
}

.practice-dot-green {
  background: #22c55e;
}

.practice-dot-red {
  background: #ef4444;
}

.practice-dot-blue {
  background: #3b82f6;
}

.practice-name {
  font-size: 28rpx;
  color: #374151;
}

.practice-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4rpx;
}

.practice-count {
  font-size: 28rpx;
  font-weight: 500;
  color: #111827;
}

.practice-rate {
  font-size: 24rpx;
  color: #6b7280;
}

/* 成就网格 */
.achievement-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24rpx;
}

.achievement-item {
  border-radius: 16rpx;
  padding: 24rpx;
  border: 1rpx solid;
}

.achievement-item-yellow {
  background: linear-gradient(to bottom right, #fef3c7, #fed7aa);
  border-color: #fde68a;
}

.achievement-item-green {
  background: linear-gradient(to bottom right, #dcfce7, #d1fae5);
  border-color: #bbf7d0;
}

.achievement-header {
  display: flex;
  align-items: center;
  gap: 16rpx;
  margin-bottom: 8rpx;
}

.achievement-icon {
  font-size: 32rpx;
}

.achievement-name {
  font-size: 28rpx;
  font-weight: 500;
}

.achievement-value {
  font-size: 40rpx;
  font-weight: bold;
  margin-top: 8rpx;
}

.achievement-item-yellow .achievement-value {
  color: #b45309;
}

.achievement-item-green .achievement-value {
  color: #15803d;
}

/* 活动列表 */
.activity-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.activity-item {
  display: flex;
  align-items: center;
  gap: 24rpx;
  padding: 16rpx;
  border-radius: 16rpx;
}

.activity-item-blue {
  background: #dbeafe;
}

.activity-item-green {
  background: #dcfce7;
}

.activity-item-yellow {
  background: #fef3c7;
}

.activity-icon {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  flex-shrink: 0;
}

.activity-item-blue .activity-icon {
  background: #bfdbfe;
}

.activity-item-green .activity-icon {
  background: #bbf7d0;
}

.activity-item-yellow .activity-icon {
  background: #fde68a;
}

.activity-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.activity-title {
  font-size: 28rpx;
  font-weight: 500;
  color: #111827;
}

.activity-time {
  font-size: 24rpx;
  color: #6b7280;
}

/* 目标列表 */
.goal-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.goal-item {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.goal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.goal-name {
  font-size: 28rpx;
  color: #374151;
}

.goal-progress {
  font-size: 28rpx;
  font-weight: 500;
  color: #111827;
}

.progress-bar {
  width: 100%;
  height: 16rpx;
  background: #e5e7eb;
  border-radius: 999rpx;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 999rpx;
  transition: width 0.3s;
}

.progress-fill-blue {
  background: linear-gradient(to right, #3b82f6, #6366f1);
}

.progress-fill-green {
  background: linear-gradient(to right, #22c55e, #10b981);
}

/* 底部导航 */
.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120rpx;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20rpx);
  border-top: 1rpx solid #f3f4f6;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  padding-bottom: env(safe-area-inset-bottom);
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8rpx;
  color: #6b7280;
}

.tab-item-active {
  color: #2563eb;
}

.tab-icon {
  font-size: 36rpx;
}

.tab-label {
  font-size: 20rpx;
}

.tab-item-active .tab-label {
  font-weight: 500;
}
</style>

